<template>
    <el-container class="admin-container">
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <div class="header-left">
          <h2>驾校管理系统</h2>
        </div>
        <div class="header-right">
          <el-dropdown trigger="click">
            <span class="user-info">
              <i class="el-icon-user"></i>
              管理员端
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <el-aside width="220px">
          <el-menu
            router
            :default-active="$route.path"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/adminDemo/ExamScores">
              <i class="el-icon-document"></i>
              <span>考试成绩管理</span>
            </el-menu-item>
            <el-menu-item index="/adminDemo/LearningProgress">
              <i class="el-icon-data-line"></i>
              <span>学习进度管理</span>
            </el-menu-item>
            <el-menu-item index="/adminDemo/instructorList">
              <i class="el-icon-data-line"></i>
              <span>教练管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
  
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  export default {
    name: 'AdminDemo',
    methods: {
      handleLogout() {
        // 处理退出登录
        this.$router.push('/login')
      }
    },
    mounted() {
      // 默认跳转到第一个子路由
      if (!this.$route.path.includes('/adminDemo/')) {
        this.$router.push('/adminDemo/ExamScores')
      }
    }
  }
  </script>
  
  <style scoped>
  .admin-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .header {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  .header-left h2 {
    margin: 0;
    color: #303133;
    font-size: 18px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #303133;
    font-size: 14px;
  }

  .user-info i {
    margin-right: 8px;
    font-size: 16px;
  }

  .el-aside {
    background-color: #545c64;
    height: calc(100vh - 60px);
  }

  .el-menu {
    border-right: none;
  }

  .el-main {
    background-color: #f0f2f5;
    padding: 20px;
  }

  .el-dropdown-menu__item {
    padding: 8px 20px;
    font-size: 14px;
  }
  </style>